<template>
  <uni-popup ref="PopupRef" type="center" :is-mask-click="false" background-color="#fff">
    <view class="account_popup">
      <view class="account_popup_top">
        <text v-if="props.jingle">授权车辆（{{ accountCars.length }}）</text>
        <text v-else>我的车辆</text>
        <text v-if="active == '0'" @click="add()">添加车辆</text>
      </view>
      <scroll-view scroll-y="true" :style="{ height: height + 'px' }">
        <view class="scroll">
          <view class="scrolls" v-for="item in carLists" :key="item.cart_code" @click="addCarBy(item.cart_code)">
            <text>{{ item.cart_code }}</text>
            <view
              class="scrolla"
              :style="{
                display:
                  (accountCars && accountCars.find((items) => items == item.cart_code)) || carIDC == item.cart_code
                    ? 'flex'
                    : 'none',
              }"
            >
              <u-icon name="checkmarkempty" color="#fff" size="18"></u-icon>
              <!-- <uni-icons type="contact" size="18" color="#fff"></uni-icons> -->
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="account_popup_bottom" v-if="props.jingle">
        <text @click.stop="cancel()">取消</text>
        <text @click="submitCar()">确认</text>
      </view>
    </view>
  </uni-popup>
  <!-- 汽车车牌 -->
  <VehiclePlatePad v-if="isShowPlateKeyboard" @cancel="isShowPlateKeyboard = false" @confirm="addPlate" />
</template>

<script setup lang="ts">
/**
 * @component
 * @description 车辆列表弹框
 * @property {Array} accountCars 车辆列表
 * @property {Boolean} props.jingle 是否显示底部栏
 * @property {String} active 状态显示添加车辆
 * @property {String} carIDC 选中的车辆
 * @property {String} height 滑动的高度
 * @property {Boolean} show  车辆弹框
 * @property {Array} carLists 车辆列表
 * @property {Boolean} isShowPlateKeyboard 输入车牌号弹框
 */

import { availableCarList, carList } from '@/gql/carAuthorized';
import { getDriverID } from '@/stores/driverID';
import { useVehicleStore } from '@/stores/vehicle';
import { showToast } from '@/utils/prompt';
import VehiclePlatePad from '@c/common/VehiclePlatePad.vue';
import { toPublish } from '@mqtt';
import { ref } from 'vue';

const props = defineProps({
  accountCars: {
    type: Array,
    default: () => [],
  },
  jingle: {
    type: Boolean,
    default: false,
  },
  active: {
    type: Number || String,
    default: 0,
  },
  carIDC: {
    type: String,
    default: '',
  },
  cart_code: {
    type: String,
    default: '',
  },
  height: {
    type: Number || String,
    default: 120,
  },
  customer: {
    type: Boolean,
    default: false,
  },
});
const vehicleStore = useVehicleStore();
// static
const driver_id = getDriverID();
// TODO carLists
// data
let show = false;
const isShowPlateKeyboard = ref(false); //车牌弹框
const carLists = ref([]);
const PopupRef = ref(null);

const emit = defineEmits(['carFfor', 'addCarBy', 'cancel', 'submitCar', 'ShowVehicle']);
/**
 * 获取车辆信息
 */
function carFInfor() {
  if (props.jingle) {
    // 获取个人车辆列表
    myCarList();
  } else {
    myCarAllList();
  }
}
function myCarAllList() {
  const payload = {
    query: availableCarList,
    variables: { driver_id },
  };
  toPublish('ql/driver/cartListCanUse', payload, (obj: any) => {
    const data = obj.data;
    const carAll = data.cart_list_can_use;
    if (carAll.length < 1 && props.jingle) {
      showToast('您暂时没有车辆可授权');
    } else {
      props.jingle ? PopupRef.value.open() : PopupRef.value.close();
      carLists.value = data.cart_list_can_use;
      emit('carFfor', carLists.value);
      if (carLists.value.length == '1' && !props.jingle) {
        addCarBy(carLists.value[0].cart_code);
      }
    }
  });
}
function myCarList() {
  const payload = {
    query: carList,
    variables: {
      from_driver_id: 0,
      driver_id,
    },
  };
  toPublish('ql/driver/getCartList', payload, (obj: any) => {
    const { cart_list } = obj.data;
    const carAll = cart_list;
    if (carAll.length < 1 && props.jingle) {
      showToast('您暂时没有车辆可授权');
    } else {
      props.jingle ? PopupRef.value.open() : PopupRef.value.close();
      carLists.value = carAll;
      emit('carFfor', carAll);
      if (carAll.length == '1' && !props.jingle) {
        addCarBy(carAll[0].cart_code);
      }
    }
  });
}
/**
 * 授权车辆
 */
function addCarBy(code) {
  if (!props.jingle) {
    PopupRef.value.close();
  }
  emit('addCarBy', {
    num: code,
    id: '1',
  });
}
/**
 * 取消授权车辆
 */
function cancel() {
  PopupRef.value.close();
  emit('cancel');
}
/**
 * 确认添加授权车辆信息
 */
function submitCar() {
  PopupRef.value.close();
  emit('submitCar');
}
/**
 * 添加车辆
 */
function add() {
  PopupRef.value.close();
  isShowPlateKeyboard.value = true;
}
function openPopupRef() {
  PopupRef.value.open();
}
/**
 * 确认添加车牌
 */
function addPlate(plateNum) {
  isShowPlateKeyboard.value = false;
  vehicleStore.getVehicleList();
  setTimeout(() => {
    carFInfor();
  }, 300);
  setTimeout(() => {
    emit('ShowVehicle', { plateNum });
  }, 500);
}
defineExpose({
  carFInfor,
  openPopupRef,
  add,
});
</script>

<style lang="less">
.account_popup {
  width: 700rpx;
  height: 240px;
  padding: 20rpx 30rpx;
  box-sizing: border-box;

  .account_popup_top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;

    text:nth-of-type(1) {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
    }

    text:nth-of-type(2) {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #2681e3;
    }
  }

  .account_popup_bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15rpx;

    text {
      width: 275rpx;
      height: 80rpx;
      border-radius: 5px;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      text-align: center;
      line-height: 80rpx;
    }

    text:nth-of-type(1) {
      border: 1px solid #1b91ff;
      box-sizing: border-box;
      color: #1b91ff;
    }

    text:nth-of-type(2) {
      background: linear-gradient(104deg, #41a3ff, #1b91ff);
      color: #ffffff;
    }
  }

  .scroll {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    background-color: white;

    .scrolls:nth-child(3n) {
      margin-right: 0px;
    }

    .scrolls {
      width: 192rpx;
      height: 76rpx;
      border: 1px solid #1b91ff;
      box-shadow: 0px 0px 51rpx 0px rgba(179, 179, 179, 0.25);
      border-radius: 5px;
      text-align: center;
      line-height: 76rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #1b91ff;
      position: relative;
      margin: 20rpx 10rpx;

      .scrolla {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 32rpx;
        height: 22rpx;
        background: linear-gradient(104deg, #41a3ff, #1b91ff);
        border-radius: 0rpx 0rpx 0px 5px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
